//工具栏
import React, { FC } from "react";
import { Button, Space, Tooltip } from "antd";
//图标
import Icon, {
  DeleteOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  CopyOutlined,
  BlockOutlined,
} from "@ant-design/icons";
import { useDispatch } from "react-redux";
//redux
import {
  removeSelectComponent,
  changeComponentHidden,
  toggleChangeLock,
  copySelectComponent,
  pasteSelectComponent,
} from "../../../store/componentReducer";
import useGetComponentinfo from "../../../hooks/useGetComponentinfo.ts";
const EditToolbar: FC = () => {
  const dispatch = useDispatch();
  const { selectedId, selectComponent, copiedComponent } = useGetComponentinfo();
  const { isLock } = selectComponent || {};

  //删除
  function handleDelete() {
    dispatch(removeSelectComponent());
  }
  //隐藏
  function handleHidden() {
    dispatch(changeComponentHidden({ fe_id: selectedId, isHidden: true }));
  }
  //锁定
  function handleLock() {
    dispatch(toggleChangeLock({ fe_id: selectedId }));
  }
  //复制
  function handleCopy() {
    dispatch(copySelectComponent());
  }
  //粘贴
  function paste() {
    dispatch(pasteSelectComponent());
  }

  return (
    <Space>
      <Tooltip title="删除">
        <Button
          shape="circle"
          icon={<DeleteOutlined></DeleteOutlined>}
          onClick={handleDelete}></Button>
      </Tooltip>
      <Tooltip title="隐藏">
        <Button
          shape="circle"
          icon={<EyeInvisibleOutlined></EyeInvisibleOutlined>}
          onClick={handleHidden}></Button>
      </Tooltip>
      <Tooltip title="锁定">
        <Button
          shape="circle"
          icon={<LockOutlined></LockOutlined>}
          onClick={handleLock}
          type={isLock ? "primary" : "default"}></Button>
      </Tooltip>
      <Tooltip title="复制">
        <Button shape="circle" icon={<CopyOutlined></CopyOutlined>} onClick={handleCopy}></Button>
      </Tooltip>
      <Tooltip title="粘贴">
        <Button
          shape="circle"
          icon={<BlockOutlined></BlockOutlined>}
          disabled={copiedComponent == null}
          onClick={paste}></Button>
      </Tooltip>
    </Space>
  );
};
export default EditToolbar;
